<template>
  <h1>我是Demo组件</h1>
  <h2>一个人的信息</h2>
  姓：<input type="text" v-model="person.lastName">
  名：<input type="text" v-model="person.firstName">
  <p>全名：{{fullName}}</p>
  <p>{{person.fullName}}</p>
  全名：<input type="text" v-model="person.fullName">
</template>

<script>
import { reactive, computed } from 'vue'
export default {
  name: 'Demo',
  // computed: {
  //   fullName() {
  //     return this.person.lastName + '-' + this.person.firstName
  //   }
  // },
  setup() {
    // 数据
    let person = reactive({
      firstName: '三',
      lastName: '张',
      age: 18
    })
    // 计算属性——简写（没有考虑计算属性被修改的情况）
    // person.fullName = computed(() => {
    //   return person.lastName + '-' + person.firstName
    // })
    let fullName = computed(() => {
      return person.lastName + '-' + person.firstName
    })
    // 计算属性——完整
    person.fullName = computed({
      get() {
        return person.lastName + '-' + person.firstName
      },
      set(value) {
        console.log(value)
        const nameArr = value.split('-')
        person.lastName = nameArr[0]
        person.firstName = nameArr[1]
      }
    })
    // 返回一个对象（常用）
    return {
      person, fullName
    }
  }
}
</script>